<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>记事本</title>
</head>
<!-- 注意：项目正式环境请勿引用该地址 -->
<link href="layui/css/layui.css" rel="stylesheet">
<style>
    * {
        padding: 0;
        margin: 0;
    }

    #note {
        width: 100vw;
        height: calc(100vh - 30px);
        background-color: rgba(22, 183, 119, 0.17);
    }

    #toolbar {
        height: 30px;
    }
</style>
<body>
<div id="toolbar">
    <select id="date">

    </select>
</div>

<div id="note" contenteditable="true">

</div>
<script src="../layui/layui.js"></script>
<script>
    let note = document.getElementById("note")
    note.addEventListener("keyup", function () {
        layui.data("note", {
            key: new Date().toLocaleDateString(),
            value: note.innerText
        })
    })
    window.addEventListener("load", function () {

        if (layui.data("note")) {
            let today = new Date().toLocaleDateString()
            let dates = Object.getOwnPropertyNames(layui.data("note"))
            let dateList = new Set(dates)
            dateList.add(today)
            let htmlTmp = "";
            dateList.forEach(value => {
                htmlTmp += `<option ${today===value?'selected':""} value="${value}" >${value}</option>`
            })
            document.getElementById("date").innerHTML = htmlTmp
            document.getElementById("date").addEventListener("change", function () {
                note.innerText = (layui.data("note")[this.value] ?? "")
            })
            note.innerText = (layui.data("note")[today] ?? "")
        }
    })
</script>
</body>
</html>